<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="../js/flexible.debug.js"></script>
		<link rel="stylesheet" type="text/css" href="../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../css/nav_.css" />
		<link rel="stylesheet" type="text/css" href="../css/swiper-3.4.2.min.css" />
		<title>登录</title>
	</head>

	<body>
		<!--头部-->
		<header class="header">
			<span><</span>
			<span>非常大牌</span>
			<span></span>
		</header>

		<!---->
		<div class="lists">
			<section class="box">
				<div class="swiper-container-list banner">
					<div class="swiper-wrapper nav-list">
						<div class="swiper-slide active">今日大牌</div>
						<div class="swiper-slide">潮流女装</div>
						<div class="swiper-slide">运动户外</div>
						<div class="swiper-slide">美妆护肤</div>
					</div>
				</div>
				<div class="swiper-container-opts subject-list">
					<div class="swiper-wrapper ron">
						<!---->
						<script type="text/html" id="da">
							{{each a v i}}
							<div class="swiper-slide list_slide">
								<div class="swiper-container lunbo" dir="rtl">
									<div class="swiper-wrapper">
										{{each v.tu b i}}
										<div class="swiper-slide"><img src="{{b}}" /></div>
										{{/each}}
									</div>
									<div class="swiper-pagination naton"></div>
								</div>

								<div class="biaoti"><span>超值好货</span>/KDWIHEDFEIFJERJIG<span></span></div>

								<div class="swiper-container huadon1">
									<div class="swiper-wrapper">
										{{each v.list1 c i}}
										<div class="swiper-slide slide1">
											<div class="content2">
												<figure><img src="{{c.img}}" /></figure>
												<p>{{c.p}}</p>
												<p><span>￥ {{c.sp1}}</span><span>￥ {{c.sp2}}</span></p>
											</div>
										</div>
										{{/each}}
									</div>
								</div>

								<div class="Major_suit">
									{{each v.list2 d i}}
									<figure>
										<img src="{{d.img}}" />
									</figure>
									<div class="swiper-container huadon2">
										<div class="swiper-wrapper">
											{{each d.slide f i}}
											<div class="swiper-slide slide1">
												<div class="content2">
													<figure><img src="{{f.img}}" /></figure>
													<p><span>￥ {{f.sp1}}</span><span>￥{{f.sp2}}</span></p>
												</div>
											</div>
											{{/each}}
										</div>
									</div>
									{{/each}}
								</div>

								<div class="da_list">
									{{each v.list3 g i}}
									<div class="lit_cont">
										<figure>
											<img src="{{g.img}}" />
											<p>{{g.p1}}</p>
											<p>￥{{g.p2}}</p>
											<p><span>￥ {{g.sp1}}</span><span>{{g.sp2}} 件已售</span></p>
										</figure>
									</div>
									{{/each}}
								</div>

							</div>
							{{/each}}
						</script>
						<!---->
						<!---->
					</div>
				</div>
			</section>
		</div>

		<script src="../js/jquery-3.2.1.js"></script>
		<script src="../js/swiper-3.4.2.jquery.min.js"></script>
		<script src="../js/template-web.js"></script>
		<script>
			$('.header :first-child').click(function(){
				location.href = "../index.html"
			})
			$.ajax({
				type: "get",
				url: "../json/da.json",
				success: function(data) {
					console.log(data)
					var str = template("da", {
						a: data
					})
					$('.ron').html(str)
					var Swiper_active1 = $('.swiper-container-list .active'),
						Swiper_slide1 = $('.swiper-container-list .swiper-slide');
					var _mySwiperlist = new Swiper('.swiper-container-list', {
						watchSlidesProgress: true,
						watchSlidesVisibility: true,
						slidesPerView: 4,
						onTap: function() {
							_mySwiperopts.slideTo(_mySwiperlist.clickedIndex)
						}
					})
					var _mySwiperopts = new Swiper('.swiper-container-opts', {
						onSlideChangeStart: function() {
							updateNavPosition(Swiper_active1, Swiper_slide1, _mySwiperopts, _mySwiperlist)
						}
					})

					function updateNavPosition(Swiper_active, Swiper_slide, mySwiper, mySwiper_list) {
						Swiper_active.removeClass('active')
						var activeNav = Swiper_slide.eq(mySwiper.activeIndex).addClass('active');
						activeNav.siblings().removeClass("active");
						if(!activeNav.hasClass('swiper-slide-visible')) {
							if(activeNav.index() > mySwiper_list.activeIndex) {
								var thumbsPerNav = Math.floor(mySwiper_list.width / activeNav.width()) - 1
								mySwiper_list.slideTo(activeNav.index() - thumbsPerNav)
							} else {
								mySwiper_list.slideTo(activeNav.index())
							}
						}
					}
					var swiper = new Swiper('.lunbo', {
						pagination: '.naton',
						paginationClickable: true,
						loop: true,
						autoplay: 2500
					});

					var swiper2 = new Swiper('.huadon1', {
						slidesPerView: 3.3,
						paginationClickable: true,
						spaceBetween: 30
					});

					var swiper2 = new Swiper('.huadon2', {
						slidesPerView: 3.3,
						paginationClickable: true,
						spaceBetween: 30
					});
				}
			});
		</script>
	</body>

</html>